<template>
  <div class="burger-fold-panel">
    <slot></slot>
  </div>
</template>

<script lang="ts">
export default {
  name: 'FoldPanel',
};
</script>

<script setup lang="ts">
import { provide } from 'vue';
import { ChangeParams, Value } from './types';

const props = defineProps({
  modelValue: {
    type: [String, Number, Array<string | number>],
    default: [],
  },
  accordion: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(['update:modelValue']);

const handleChange = (params: ChangeParams) => {
  let value: Value | Value[] | null;
  // 如果是手风琴模式，则关闭其他
  if (props.accordion) {
    if (params.visible) {
      value = params.name;
    } else {
      value = null;
    }
  } else {
    if (params.visible) {
      if (Array.isArray(props.modelValue)) {
        value = [...props.modelValue, params.name];
      } else {
        value = [props.modelValue, params.name];
      }
    } else {
      if (Array.isArray(props.modelValue)) {
        value = props.modelValue.filter((item) => item !== params.name);
      } else {
        value = props.modelValue === params.name ? [] : [props.modelValue];
      }
    }
  }
  emits('update:modelValue', value);
};

provide('foldPanelProps', props);

provide('handleChange', handleChange);
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>
